<template>
  <el-container>
    <el-main>
      <h1 align="center">对账明细表管理</h1>
      <el-form :inline="true" :model="form" size="mini">
        <el-form-item label="交货日期:">
          <el-date-picker
            v-model="form.deliveryDate"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM"
          />
        </el-form-item>
        <el-form-item label="客户:" prop="name">
          <el-input v-model="form.name" clearable />
        </el-form-item>
        <el-form-item label="结算状态:" prop="name">
          <el-select v-model="form.settlement">
            <el-option label="全部" value="" />
            <el-option label="已结算" value="已结算" />
            <el-option label="部分结算" value="部分结算" />
            <el-option label="未结算" value="未结算" />
          </el-select>
        </el-form-item>
        <el-tooltip class="item" effect="dark" content="按条件查询后打印" placement="top">
          <el-button type="primary" size="mini" @click="selectData">查询</el-button>
        </el-tooltip>
        <el-button type="primary" size="mini" :disabled="disabled" @click="printing">生成月份打印单</el-button>
        <!-- <el-button type="primary" size="mini" @click="purAdd">新增</el-button> -->
        <!-- <el-button type="warning" size="mini" @click="selectPrinting">选择打印</el-button>
        <el-button type="warning" size="mini" @click="wholePrinting">整页打印</el-button>
        <el-button type="success" size="mini" @click="toExcel">Excel导出</el-button> -->
      </el-form>
      <div>
        <el-table
          ref="singleTable"
          :data="tableData1"
          highlight-current-row
          style="width: 100%;margin-top:20px"
          border
          :summary-method="getSummaries"
          show-summary
          @selection-change="handleSelectionChange"
        >
          <el-table-column v-show="true" prop="name" label="客户名称" width="120" />
          <el-table-column v-show="true" prop="no" label="任务编号" width="120" />
          <el-table-column v-show="true" prop="deliveryDate" label="交货日期" width="120" />
          <el-table-column v-show="true" prop="modelNo" label="物品单号/款号" width="180" />
          <el-table-column v-show="true" prop="boxType" label="箱型" width="80" />
          <el-table-column v-show="true" label="长x宽x高" width="180">
            <template v-if="scope.row.length != null && scope.row.width != null && scope.row.height != null" slot-scope="scope">
              {{ scope.row.length+' X '+scope.row.width+' X '+scope.row.height }}
            </template>
          </el-table-column>
          <el-table-column v-show="true" prop="orderNum" label="数量" width="80" />
          <el-table-column v-show="true" prop="perPrice" label="单价" width="80" />
          <el-table-column v-show="true" prop="money" label="金额" width="80" />
          <el-table-column v-show="true" prop="beginReceive" label="期初" width="80" />
          <el-table-column v-show="true" prop="payed" label="已付" width="80" />
          <el-table-column v-show="true" prop="unPayed" label="欠款" width="80" />
          <el-table-column v-show="true" prop="settlementDate" label="结算日期" width="150">
            <template slot-scope="scope">
              <div v-for="(item,key) in scope.row.settlementDate" :key="key">
                {{ item }}
              </div>
            </template>
          </el-table-column>
          <el-table-column v-show="true" prop="settlement" label="结算状态" width="100" />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.settlement !== '已结算'" type="success" size="mini" @click="settlement(scope.row)">结算</el-button>
              <el-button v-else type="success" size="mini" disabled>已结算</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="pagination.total"
          :current-page="pagination.page"
          :page-size="pagination.size"
          align="center"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-main>
    <postDialog :id="id" :dialog="postDialog" @init="selectData" />
    <settlementDialog :id="id2" :dialog="settlementDialog" @init="selectData" />
  </el-container>

</template>

<script>
import initData from '@/mixins/initData'
import { export2Excel } from '@/utils/common'
import { record, customer } from '@/api/accessories/means'
import postDialog from '@/views/finance/verify/post'
import settlementDialog from '@/views/finance/verify/settlement'

// import { record } from '@/finance/verify'
export default {
  name: 'Verify',
  components: { postDialog, settlementDialog },
  mixins: [initData],
  data() {
    return {
      settlementState: false,
      id: '',
      id2: '',
      postDialog: {
        show: false
      },
      settlementDialog: {
        show: false
      },
      // 选择月份
      month: [],
      // 选择客户
      value: '',
      customer: [],
      valu: '',
      form: {
        count: 10,
        customerId: '',
        deliveryDate: '',
        page: 1,
        fullName: '',
        date: '',
        id: '',
        time: '',
        name: '',
        settlement: ''
      },
      formAdd: {
        page: 1,
        count: 10
      },
      // 表单数据
      tableData: [{
        customerName: '',
        phone: '',
        data: '2020--11',
        shipment: '',
        goods: '',
        type: '',
        long: '',
        number: '',
        price: '',
        money: ''

      }],
      tableData1: [],
      purAddVisible: false,
      purRules: {
        supplier: [{ required: true, message: '该输入为必填项', trigger: 'change' }],
        pricing: [{ required: true, message: '该输入为必填项', trigger: 'change' }],
        billingTime: [{ required: true, message: '该输入为必填项', trigger: 'change' }],
        deliveryTime: [{ required: true, message: '该输入为必填项', trigger: 'change' }]
      },
      titleType: '',
      taskNumberVisible: false,
      multipleSelection: [],
      indexId: {},
      fullNames: [],
      disabled: true

    }
  },
  created() {
    this.init()
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1 || index === 2 || index === 3 || index === 4 || index === 5 || index === 7 || index === 14 || index === 13 || index === 12) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' '
        } else {
          sums[index] = 'N/A'
        }
      })
      return sums
    },
    post(data) {
      this.id = data.id
      this.postDialog.show = true
    },
    settlement(data) {
      this.id2 = data.id
      this.settlementDialog.show = true
    },
    supplierList() {},
    // 获取列表数据
    loadData() {
      record(this.form).then(res => {
        console.log(res)
        this.tableData1 = res.list
        this.tableData1.forEach(data => {
          data.unPayed = Math.abs(data.money - data.beginReceive - data.payed)
          // if (data.post === null) {
          //   data.post = '未过账'
          // }
          if (data.settlement === null) {
            data.settlement = '未结算'
          }
        })
        this.pagination.total = res.total
      })
      // 获取用户数据
      customer().then(res => {
        this.tableData = res
      })
    },
    selectData() {
      this.loadData()
      this.disabled = false
    },
    // 导出
    toExcel() {
      var list = this.tableData
      const th = ['编码', '名称', '限定最大纸长']
      const filterVal = ['code', 'name', 'limitPaperLength']
      const data = list.map(v => filterVal.map(k => v[k]))
      export2Excel(th, data, '采购单导出')
    },
    // 打印
    printing() {
      // tableData1
      this.$router.push({ name: 'Verify_printing', params: { 'data': this.tableData1 }})
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    }
    // // 删除
    // drop() {
    //   this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$message({
    //       type: 'success',
    //       message: '删除成功'
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     })
    //   })
    // },
    // // 编辑订单
    // modifyPur(row) {
    //   this.purAddVisible = true
    //   this.titleType = '编辑'
    // },
    // // 新增订单
    // purAdd() {
    //   this.purAddVisible = true
    //   this.titleType = '新增'
    //   // 新增初始化数据
    //   this.formAdd = {}
    // },
    // 取消
    // purAddNo() {
    //   this.purAddVisible = false
    //   this.addTableData = []
    // }
    // purAddOk(purForm) {
    //   this.$refs[purForm].validate((valid) => {
    //     if (valid) {
    //       this.purAddVisible = false
    //     } else {
    //       return false
    //     }
    //   })
    // }
  }
}
</script>
<style scoped lang="scss">
.el-dialog__header {
    border: 1px;
  }
</style>
